<!--
 * @Author: Wangtao
 * @Date: 2020-10-22 19:27:39
 * @LastEditors: zhanwang
 * @LastEditTime: 2021-10-20 15:36:31
-->
<template>
  <continer>
    <template slot="content">
      <el-form class="m7-form" :label-position="labelPosition" :model="formData" size="mini" ref="nodeForm">
        <el-form-item label="节点名称">
          <el-input v-model="formData.name" disabled size="mini"></el-input>
        </el-form-item>
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">

          <el-tab-pane label="自定义参数" name="first">
            <div class="tips">
                <i style="color: #FAAD14; font-size: 14px;margin-right: 7px" class="V7_iconfont V7_iconV7tubiao_tishi"></i>
                <span>参数用于语音导航流程中的传递，参数名称不可重复。</span>
            </div>
            <div v-for="(item, index) in formData.customList" :key="item._id">
              <div class="select-group-start" >
                <el-form-item label="参数"  :prop="'customList.'+index+'.key'" :rules="checkKey">
                  <span slot="label" >
                    参数
                    <el-tooltip class="item" effect="dark" content="在数据交互节点如果要替换此参数的值，需要在返回的参数前加customer_前缀。" placement="top">
                      <span class="V7_iconfont V7_iconV7tubiao_bangzhu-42 tip-span"></span>
                    </el-tooltip>
                  </span>
                  <el-input v-model="item.key"  size="mini"></el-input>
                </el-form-item>
                <el-form-item label="初始值">
                  <el-input v-model="item.value"  size="mini"></el-input>
                </el-form-item>
                <el-form-item label="备注">
                  <el-input v-model="item.memo"  size="mini"></el-input>
                </el-form-item>
                <div class="select-oprate">
                  <span @click="deleteCustomList(item, index)"><i class="V7_iconfont V7_iconV7tubiao-109 delete-span"></i></span>
                </div>
              </div>
            </div>
            <div class="addCondition">
             <span @click="addCustomList"><i class="V7_iconfont V7_iconV7tubiao_xinzeng add-span"></i>增加条件</span>
            </div>
          </el-tab-pane>
          <el-tab-pane label="系统参数" name="second">
            <div class="tips">
              <i style="color: #FAAD14; font-size: 14px;margin-right: 7px" class="V7_iconfont V7_iconV7tubiao_tishi"></i>
               <span>系统参数由平台提供，自定义参数不可与系统参数名重复。</span>
            </div>
            <el-table
              :data="tableData"
              header-row-class-name='myTable'
              :row-style="{
                height: '32px'
              }"
              max-height="400"
              style="width: 100%;margin-bottom: 10px">
              <el-table-column
                prop="key"
                label="参数"
                >
              </el-table-column>
              <el-table-column
                prop="memo"
                label="字符串"
                >
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
        <el-form-item
          :label="item.label"
          prop="region"
          v-for="(item, index) in condition"
          :key="index"
        >
        <el-select v-model="item.to" placeholder="请选择下一步节点" filterable clearable>
          <el-option v-for="(node, index) in nodeList" :label="node.data.name" :value="node.id" v-show="!node.viewOnly && node.id !== currentData.id" :key="index"></el-option>
        </el-select>
        </el-form-item>
      </el-form>
    </template>
    <template slot="oprate">
      <el-button @click="cancel" size="mini">取消</el-button>
      <el-button type="primary" @click="onSubmit" size="mini">确定</el-button>
    </template>
  </continer>
</template>

<script lang="ts">
import { Component, Mixins } from 'vue-property-decorator'
import continer from '@/components/configCommon/ui-modules/drawer-container.vue'
import nodeEidtMixins from './nodeEidtMixins'
import { deepClone, commonAction } from '@/utils/common'
@Component({
  name: 'StartNode',
  components: { continer }
})

export default class extends Mixins(nodeEidtMixins) {
  private activeName = 'first'
  private handleClick () {
    //
  }

  private created () {
    if (!Object.prototype.hasOwnProperty.call(this.currentNode.data, 'customList')) {
      this.$set(this.currentNode.data, 'customList', [deepClone(this.minData)])
    }
    this.getPublicCustom()
    this.currentNode.data.variableType = 'custom'
  }

  private beforeCreate () {
    //
  }

  private minData = {
    key: '',
    value: '',
    memo: ''
  }

  private addCustomList () {
    if (this.formData.customList.length > 99) {
      (this as any).$message.warning('条数不能超过100')
      return
    }
    this.formData.customList.push(deepClone(this.minData))
  }

  private deleteCustomList (item, i) {
    this.formData.customList.splice(i, 1)
  }

  private tableData: any = []
  private getPublicCustom () {
    const url = '/base/action/general/cache/query'
    commonAction({ url, method: 'post', data: { types: ['ivrSystemVariableList'] } }).then(res => {
      if (res.success) {
        this.tableData = res.ivrSystemVariableList || []
      }
    })
  }

  get checkKey () {
    const keyList = this.formData.customList.map(i => i.key) || []
    const publicList = this.tableData.map(i => i.key) || []
    const checkKey = (rule, value, callback) => {
      if (!new RegExp('^[A-Za-z0-9_]{0,50}$').test(value)) {
        callback(new Error('支持大小写英文+数字+下划线格式，区分大小写，至多50字符'))
      } else if (keyList.filter(i => i === value).length > 1) {
        if (value) {
          callback(new Error('参数名已存在'))
        } else {
          callback(new Error('参数名为空'))
        }
      } else if (publicList.includes(value)) {
        callback(new Error('与系统参数冲突'))
      } else {
        callback()
      }
    }
    return { trigger: 'blur', validator: checkKey }
  }
}
</script>

<style lang="stylus" scoped>
.start-node
  height 100%
.select-oprate
  display flex
  align-items center
.delete-span
  cursor pointer
  &:hover
    color $c-danger
.select-group-start
  display flex
  /deep/.el-form-item
    width 33%
    margin-right 10px
.addCondition
  display: flex;
  align-items: center;
  color: #008cee;
  cursor: pointer;
  margin-bottom: 15px;
.add-span
  font-size 12px
  &:before
    margin-right 4px
.tips
  height: 34px;
  background: #FFFBE6;
  border-radius: 4px;
  font-size: 12px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #303753;
  line-height: 34px;
  padding-left 12px
  margin-bottom 10px
/deep/.el-table .myTable th
  height: 32px;
  background: #FAFAFA;
  border-radius: 4px 4px 0px 0px;
  font-size: 12px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #303753;
/deep/.el-table td
  padding 4px 0
.tip-span
    color $icon-gray
    font-size 12px
    cursor pointer
</style>
